$(document).ready(function () {
  var cityId = '0';
  var hosId = '0';
  var depList = [];
  var docList = [];

  //dom event
  $(document).on('mouseover', '.home-hot-ks-block', handleHotDepShow)
    .on('mouseleave', '.home-first-bx', handleHotDepHide)
    .on('click', '.home-hot-more-ks-close', handleHotDepHide)
    .on('click input propertychange', '#dropdownMenuReversionDep', handleDepChange)
    .on('click input propertychange', '#dropdownMenuReversionDoc', handleDocChange)
    .on('click', '.dropdown-menu-dep > a', handleDepValChange)
    .on('click', '.dropdown-menu-doc > a', handleDocValChange)
    .on('click', '.home-main-area-hospital-areas>div', handleAreaHospitalClick)
    .on('click', '.home-main-area-hospital-item', handleHosClick)
    .on('click', '.home-main-hot-type > div', handleHotClick)
    .on('click', '#quick-reservation-btn', handleQuickReservationBtnClick)
    .on('click', '.home-main-area-hospital-more', handleMoreHospitalByArea);
  $('#dropdownMenuReversionArea').next().on('click', '.dropdown-item', handleAreaChange);
  $('#dropdownMenuReversionHos').next().on('click', '.dropdown-item', handleHosChange);

  var sliders=[
    {eleDataType:'hos',num:0,curNum:0,sliderObj:undefined},
    {eleDataType:'dep',num:0,curNum:0,sliderObj:undefined},
    {eleDataType:'doc',num:0,curNum:0,sliderObj:undefined}
  ]
  
  sliders.forEach((item,index) => {
    let eleDataType=item.eleDataType
    let num=document.querySelector('.glider[data-type='+eleDataType+']').querySelectorAll('.column-wrap').length
    item.num=num<5?0:num-4;
    item.sliderObj=new Glider(document.querySelector('.glider[data-type='+eleDataType+']'), {
      // Mobile-first defaults
      slidesToShow: 4,
      slidesToScroll: 1,
      scrollLock: true,
      duration: 2,
      arrows: {
        prev: '.home-main-hot-list-grad-left[data-type='+eleDataType+']',
        next: '.home-main-hot-list-grad-right[data-type='+eleDataType+']'
      },
    });
  });
  $('.glider').css('width', 'calc(100% - 1px)');

  setInterval(()=>{
    sliders.forEach((item,index) => {
      if(item.curNum+1>item.num){
        item.curNum=0
        item.sliderObj.scrollTo(0)
      }else{
        item.sliderObj.scrollItem('next')
        item.curNum++
      }
    });
  },3000)

  // 热门科室
  function handleHotDepShow(e) {
    if ($(this).hasClass('home-hot-ks-block-active')) {
      return;
    }
    $('.home-hot-more-ks').html($(this).data('detail'));
    $('.home-hot-ks-block').removeClass('home-hot-ks-block-active');
    $(this).addClass('home-hot-ks-block-active');
    $('.home-hot-more-ks').css('display', 'block');
    $('.home-hot-more-ks').css('opacity', 1);
  }
  function handleHotDepHide(e) {
    if ($('.home-hot-more-ks').css('opacity') == '0') {
      return;
    }
    $('.home-hot-ks-block').removeClass('home-hot-ks-block-active');
    $('.home-hot-more-ks').css('opacity', 0);
    setTimeout(function () {
      $('.home-hot-more-ks').css('display', 'none');
    }, 300);
  }

  function handleAreaChange(e) {
    cityId = $(this).attr('data-id') || '0';
    $('#dropdownMenuReversionArea .dropdown-text').text($(this).text());
    $('#dropdownMenuReversionHos .dropdown-text').text('请选择医院(必选)');
    hosId = 0;
    depList = [];
    $('#dropdownMenuReversionDep').val('').attr('disabled', true);
    getHosList();
  }

  function getHosList() {
    $('#dropdownMenuReversionHos dropdown-text').text('请选择医院(必选)');
    $('#dropdownMenuReversionHos').attr('disabled', true).next().html('');
    $.get('/api/getHosListByCity/' + cityId).then(function (res) {
      if (_.get(res, 'code') === 0) {
        $('#dropdownMenuReversionHos').attr('disabled', false);
        var docItem = _.get(res, 'data', []).map(function (item) {
          return '<a class="dropdown-item" data-id="' + item.hosid + '">' + item.hosname + '</a>';
        });
        $('#dropdownMenuReversionHos').next().html(docItem.join(''));
      }
    });
  }

  function getDepList() {
    $('#dropdownMenuReversionDep').val('').data('id', '');
    $('#dropdownMenuReversionDep').attr('disabled', false);

    $.get('/api/departments/' + hosId).then(function (res) {
      if (_.get(res, 'code') === 0) {
        depList = _.get(res, 'data', []);
      }
    });
  }

  function getDocList() {
    $('#dropdownMenuReversionDoc').val('').data('id', '');
    $('#dropdownMenuReversionDoc').attr('disabled', false);

    $.get('/api/doctors/' + hosId).then(function (res) {
      if (_.get(res, 'code') === 0) {
        docList = _.get(res, 'data', []);
      }
    });
  }


  function handleDepValChange() {
    $('#dropdownMenuReversionDep').val($(this).text()).data('id', $(this).data('id'));
  }
  function handleDocValChange() {
    $('#dropdownMenuReversionDoc').val($(this).text()).data('id', $(this).data('id'));
  }

  function handleHosChange() {
    hosId = $(this).attr('data-id');
    $('#dropdownMenuReversionHos .dropdown-text').text($(this).text());
    getDepList();
    $('#dropdownMenuReversionDep').next('.dropdown-menu').html('<span class="dropdown-item">请输入关键字</span>');
    getDocList();
    $('#dropdownMenuReversionDoc').next('.dropdown-menu').html('<span class="dropdown-item">请输入关键字</span>');
  }

  function handleDepChange() {
    var $this = $('#dropdownMenuReversionDep');
    if ($this.val()) {
      $this.next('.dropdown-menu').html(depList.filter(function (v) {
        return ~v.deptname.indexOf($this.val());
      }).map(function (v) {
        return '<a class="dropdown-item" data-id="' + v.deptid + '">' + v.deptname + '</a>';
      }).join('') || '<span class="dropdown-item">没有相关科室</span>');
    } else {
      $this.next('.dropdown-menu').html('<span class="dropdown-item">请输入关键字</span>');
    }
  }

  function handleDocChange() {
    var $this = $('#dropdownMenuReversionDoc');
    if ($this.val()) {
      $this.next('.dropdown-menu').html(docList.filter(function (v) {
        return ~v.docname.indexOf($this.val());
      }).map(function (v) {
        return '<a class="dropdown-item" data-id="' + v.docid + '">' + v.docname + '</a>';
      }).join('') || '<span class="dropdown-item">没有相关医生</span>');
    } else {
      $this.next('.dropdown-menu').html('<span class="dropdown-item">请输入关键字</span>');
    }
  }

  function handleAreaHospitalClick() {
    $('.home-main-area-hospital-areas>.active').removeClass('active');
    $(this).addClass('active');
    $.get('/api/getHosListByArea/' + $(this).data('id')).then(function (res) {
      if (_.get(res, 'code') === 0) {
        $('.home-main-area-hospital-list').html(_.get(res, 'data', []).map(function (hos) {
          return '<div class="home-main-area-hospital-item float-left word-inline" data-id="' + hos.hosid + '">' +
            ( hos.shortname || hos.hosname ) +
            '</div>';
        }).join('') + '<div class="home-main-area-hospital-more float-right">查看更多医院 >></div>');
      }
    });
  }
  function handleHosClick() {
    window.location.href = ('/hospital/' + $(this).data('id'));
  }

  function handleHotClick() {
    $('.home-main-hot-type > div').removeClass('active');
    $(this).addClass('active');
    $('.home-main-hot-list').css('height', '0px');
    $('.home-main-hot-list[data-type=' + $(this).data('type') + ']').css('height', 'auto');
  }

  function handleQuickReservationBtnClick() {
    var docid = $('#dropdownMenuReversionDoc').data('id');
    var depid = $('#dropdownMenuReversionDep').data('id')
    if (docid) {
      window.location.href = ('/doctor/' + hosId + '/' + docid);
    } else if (depid) {
      window.location.href = ('/department/' + hosId + '/' + depid);
    } else if (hosId !== '0') {
      window.location.href = ('/hospital/' + hosId);
    } else {
      warning_prompt('请先选择医院');
    }
  }

  function handleMoreHospitalByArea() {
    window.location.href = ('/search/hospital?page=1&key=&areaId=' + $('.home-main-area-hospital-areas > .active').data('id'));
  }

  let hotDocEle=$('.home-hot-doc-container>div');
  let hotDocHeight=Math.ceil(hotDocEle.height());
  let hotDocSingleHeight=Math.floor($('.home-hot-doc-container>div>a:first-of-type()').height());
  hotDocSingleHeight=hotDocSingleHeight+30;
  let hotDocTimes=1,hotDocRows=Math.floor(hotDocHeight/hotDocSingleHeight);

  let hotHospitalEle=$('.home-hot-hospital-container>div');
  let hotHospitalHeight=Math.ceil(hotHospitalEle.height());
  let hotHospitalSingleHeight=Math.floor($('.home-hot-hospital-container>div>a:first-of-type()').height());
  let hotHospitalTimes=1,hotHospitalRows=Math.floor(hotHospitalHeight/hotHospitalSingleHeight);
  
  // console.log(hotHospitalHeight);
  // console.log(hotHospitalRows);

  hotDocEle.addClass('scrollUp'+hotDocRows);
  hotHospitalEle.addClass('hospitalScrollUp'+hotHospitalRows);

});